<template>
  <div class="video-card">
    <el-link class="video-cover" @click="GoVideoDetail">
      <img
        :src="video.img_url ? video.img_url : defaultImageUrl"
        alt="Video Cover"
        class="cover-image"
        ref="coverImage"
        @mouseover="hoverEffect"
        @mouseleave="resetEffect"
      />
      <div class="overlay">
        <i class="fas fa-play"></i>
      </div>
    </el-link>
    <el-link
      :underline="false"
      class="video-top"
      type="info"
      @click="GoVideoDetail"
    >
      <div class="title">{{ video.video_title }}</div>
    </el-link>
    <div class="video-details">
      <div class="created-at">{{ video.create_time | formatDate }}</div>

      <div class="stats">
        <div class="stat">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable="false"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8.05882 9.38973L11.7724 2.42678C11.8993 2.18883 12.1914 2.09699 12.4121 2.25201C12.9945 2.66123 13.8333 3.45218 13.8333 4.37503C13.8333 4.87411 13.7011 5.7719 13.5626 6.71262C13.4101 7.74781 13.25 8.83498 13.25 9.50003H20.8333C21.2778 9.50003 22 9.95175 22 11C22 11.904 21.0084 16.0872 20.3079 19.0423C20.1961 19.5138 20.0917 19.9541 20 20.3449C20 20.5632 19.7333 21 18.6667 21H8.49796C8.22182 21 8 20.7762 8 20.5V9.62503C8 9.54296 8.0202 9.46215 8.05882 9.38973ZM3.5 9.50003C3.22386 9.50003 3 9.72389 3 10V20.5C3 20.7762 3.22386 21 3.5 21H5.5C5.77614 21 6 20.7762 6 20.5V10C6 9.72389 5.77614 9.50003 5.5 9.50003H3.5Z"
              fill="currentColor"
            ></path>
          </svg>
          <span class="count">{{ video.like_count }}</span>
        </div>
        <div class="stat">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable="false"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
              fill="currentColor"
            ></path>
          </svg>
          <span class="count">{{ video.comment_count }}</span>
        </div>
        <div class="stat">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable="false"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12 4C5 4 1 10 1 12C1 14 5 20 12 20C19 20 23 14 23 12C23 10 19 4 12 4ZM17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
              fill="currentColor"
            ></path>
          </svg>
          <span class="count">{{ video.view_count }}</span>
        </div>
        <div class="stat">
          <a href="#" @click="shareVideo">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              style="color:#b4b4b4;"
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M14.4393 2.43934C13.8536 3.02513 13.8536 3.97487 14.4393 4.56066L16.8787 7H9.25C5.1647 7 2 10.5796 2 14.5C2 18.4204 5.1647 22 9.25 22H12.5C13.3284 22 14 21.3284 14 20.5C14 19.6716 13.3284 19 12.5 19H9.25C6.98402 19 5 16.9308 5 14.5C5 12.0692 6.98402 10 9.25 10H16.8787L14.4393 12.4393C13.8536 13.0251 13.8536 13.9749 14.4393 14.5607C15.0251 15.1464 15.9749 15.1464 16.5607 14.5607L21.5607 9.56066C22.1464 8.97487 22.1464 8.02513 21.5607 7.43934L16.5607 2.43934C15.9749 1.85355 15.0251 1.85355 14.4393 2.43934Z"
                fill="currentColor"
              ></path>
            </svg>
            分享
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultImage from '@/assets/img/defaultImg.jpg'
import { copyToClipboard } from '@/utils/tools'
export default {
  props: {
    video: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 默认图片
      defaultImageUrl: defaultImage
    }
  },
  computed: {
    formatCreatedAt() {
      // 格式化创建时间，例如：2023-05-23
      return this.video.create_time.split(' ')[0]
    }
  },
  methods: {
    hoverEffect() {
      this.$refs.coverImage.style.transform = 'scale(1.05)'
    },
    resetEffect() {
      this.$refs.coverImage.style.transform = 'scale(1)'
    },
    // 跳转到详情页面
    GoVideoDetail() {
      this.$router.push('/videoDetail/' + this.video.id)
    },
    // 分享链接
    shareVideo() {
      const currentUrl =
        window.location.origin + '/videoDetail/' + this.video.id
      copyToClipboard(currentUrl) // 调用复制链接到剪贴板的方法
      alert('当前页面链接已复制到剪贴板')
    }
  }
}
</script>

<style scoped>
.video-cover {
  position: relative;
  border-radius: 8px 8px 0 0;
  height: 130px;
  width: 100%;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-cover:hover .overlay {
  opacity: 1;
}

.overlay i {
  color: white;
  font-size: 48px;
}

.video-top {
  width: 100%;
  font-size: 18px;
  padding: 16px;

  display: flex;
  justify-content: flex-start;
  font-weight: bold;
}
.video-top .title {
  font-size: 16px;
  color: #121212;
}
.video-center {
  text-align: center;
  margin-bottom: 5px;
  color: #756266;
  font-size: 14px;
}

.video-details {
  padding: 0px 16px 16px;
  font-size: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  display: flex;

  color: #606266;
}

.stats {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  justify-content: flex-start;
  width: 100%;
}

.stat {
  display: flex;
  color: #b4b4b4;
  align-items: center;
  margin-right: 8px;
}
.stat a {
  color: #b4b4b4;
}

.stat i {
  margin-right: 2px;
}
.stat .count {
  display: flex;
  margin-left: 4px;
  font-size: 14px;
}
.created-at {
  text-align: center;
  color: #b4b4b4;
  font-size: 14px;
}
</style>
